<template>
  <div id="Team">
    <van-search
      v-model="searchText"
      placeholder="搜索队伍"
      @search="onSearch"
    />
    <van-tabs v-model:active="active" @change="onTabChange">
      <van-tab title="公开" name="public" />
      <van-tab title="加密" name="private" />
    </van-tabs>
    <van-button
      class="add-button"
      icon="plus"
      type="primary"
      @click="toAddTeam"
    ></van-button>
    <team-card-list :teamList="teamList" />
    <van-empty
      v-if="!teamList || teamList.length < 1"
      description="搜索数据为空"
    />
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import { showToast } from "vant";
import axiosUrl from "../plugins/myAxios";
import TeamCardList from "../components/TeamCardList.vue";

const router = useRouter();
const searchText = ref("");
const active = ref('public')

  //tab切换显示内容
const onTabChange = (name) => {
  //公开
  if(name === 'public') {
    listTeam(searchText.value,0)
  } else {
    //加密
    listTeam(searchText.value,2)
  }
}

//跳转到队伍页
const toAddTeam = () => {
  router.push({
    path: "/team/add",
  });
};

const teamList = ref([]);

//搜索队伍
const listTeam = async (val = "",status = 0) => {
  const res = await axiosUrl.get("/team/list", {
    params: {
      searchText: val,
      pageNum: 1,
      status,
    },
  });
  if (res?.code === 0) {
    teamList.value = res.data;
  } else {
    showToast("加载队伍失败,请刷新重试");
  }
};

//页面挂载时触发 只触发一次
onMounted(() => {
  listTeam();
});

const onSearch = (val) => {
  listTeam(val);
};
</script>

<style>
</style>